<template>
  <div class="toolbar">
    <div class="toolbar-left">
      <h2 class="toolbar-title">
        <i class="el-icon-s-grid"></i>
        可拖动图表Demo
      </h2>
    </div>

    <div class="toolbar-center">
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="handleAddNode" size="small">
          添加节点
        </el-button>

        <el-button type="success" icon="el-icon-connection" @click="handleAddConnection" size="small"
          :disabled="!canCreateConnection">
          创建连接
        </el-button>

        <el-button type="warning" icon="el-icon-delete" @click="handleDeleteSelected" size="small"
          :disabled="!hasSelection">
          删除选中
        </el-button>
      </el-button-group>
    </div>

    <div class="toolbar-right">
      <el-button-group>
        <el-button type="info" icon="el-icon-download" @click="handleSave" size="small">
          保存布局
        </el-button>

        <el-button type="default" icon="el-icon-refresh" @click="handleReset" size="small">
          重置画布
        </el-button>

        <el-button type="default" icon="el-icon-zoom-in" @click="handleZoomIn" size="small">
          放大
        </el-button>

        <el-button type="default" icon="el-icon-zoom-out" @click="handleZoomOut" size="small">
          缩小
        </el-button>
      </el-button-group>

      <!-- 缩放比例显示 -->
      <span class="scale-indicator">
        {{ Math.round(scale * 100) }}%
      </span>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import { v4 as uuidv4 } from 'uuid'
import { getClosestConnectionPoint } from '../util'
export default {
  name: 'Toolbar',
  computed: {
    ...mapState(['selectedNodeIds', 'scale', 'nodes', 'connections']),
    ...mapGetters(['getNodeById']),


    hasSelection() {
      return this.selectedNodeIds.length > 0
    },

    canCreateConnection() {
      // 简化逻辑：当有选中节点时可以创建连接
      return this.selectedNodeIds.length === 2
    }
  },
  methods: {
    ...mapActions(['removeNode', 'updateCanvasTransform','addConnection']),
    // 添加节点
    handleAddNode() {
      this.$emit('add-node')
    },

    // 创建连接
    handleAddConnection() {
      const [sourceNodeId, targetNodeId] = this.selectedNodeIds
      const sourceNode = this.getNodeById(sourceNodeId)
      const targetNode = this.getNodeById(targetNodeId)
      if (!sourceNode && !targetNode) return
      const closestPoint = getClosestConnectionPoint(sourceNode, targetNode)
      const newConnection = {
        id: uuidv4(),
        sourceNodeId: sourceNodeId,
        targetNodeId: targetNodeId,
        sourcePoint: closestPoint.sourcePoint,
        targetPoint: closestPoint.targetPoint,
        style: {
          strokeColor: sourceNode.style.borderColor,
          strokeWidth: 2
        }
      }
      this.addConnection(newConnection)
    },
  // 删除选中项
  handleDeleteSelected() {
    if (this.selectedNodeIds) {
      this.$confirm('确定要删除选中的节点吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeNode(this.selectedNodeIds)
        this.$message.success('节点已删除')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  },

  // 保存布局
  handleSave() {
    const data = {
      nodes: this.nodes,
      timestamp: new Date().toISOString()
    }

    // 模拟保存到本地存储
    localStorage.setItem('chart-layout', JSON.stringify(data))
    this.$emit('save')
  },

  // 重置画布
  handleReset() {
    this.$emit('reset')
  },

  // 放大
  handleZoomIn() {
    const newScale = Math.min(3, this.scale * 1.2)
    this.updateCanvasTransform({
      scale: newScale,
      panX: 0,
      panY: 0
    })
  },

  // 缩小
  handleZoomOut() {
    const newScale = Math.max(0.1, this.scale * 0.8)
    this.updateCanvasTransform({
      scale: newScale,
      panX: 0,
      panY: 0
    })
  }
}
}
</script>

<style scoped>
.toolbar {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.toolbar-title {
  margin: 0;
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scale-indicator {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.el-button-group {
  margin: 0 8px;
}
</style>